<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue.js</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
	<div id="app">

	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el: 'app',
			data: {
				name: 'Hello',
				url: 'http://www.baidu.com'
			},
			computed: {
				site: {
					// getter
					get: function() {
						return this.name + ' ' + this.url
					},
					// setter
					set: function (newValue) {
						var names = newValue.split(' ')
						this.name = names[0]
						this.url = names[names.length - 1]
					}
				}
			}
		})
		// 调用setter, vm.name和vm.url也会被对应更新
		vm.site = '百度 http://www.baidu.com';
		document.write('name: ' + vm.name)
		document.write('<br>')
		document.write('url: ' + vm.url)
	</script>
</body>
</html>
